<template>
    <div class="options">
        <!-- 首页选项卡商品 -->
        <ul class="list">
            <li v-for="item in options" :key="item.id" :class="{show: num == item.id}" @click="pitchOn(item.id)">{{item.text}}</li>
        </ul>
        <a-row type="flex" justify="center" class="commodity">
           <a-col :xs="23" :sm="12" :md="6" :lg="6" :xl="6" v-for="item in newProduct" :key="item.id"  v-show=" num == 0">
                 <commodity :data="item">
                    <template v-slot>
                        <router-link :to="'/details/' + item.id">
                            <button>立即选购</button>
                        </router-link>
                    </template>
                </commodity>
            </a-col>
            <a-col :xs="23" :sm="12" :md="6" :lg="6" :xl="6" v-for="item in bestSelling" :key="item.id"  v-show=" num == 1">
                <commodity :data="item">
                    <template v-slot>
                        <router-link :to="'/details/' + item.id">
                            <button>立即选购</button>
                        </router-link>
                    </template>
                </commodity>
            </a-col>
            <a-col :xs="23" :sm="12" :md="6" :lg="6" :xl="6" v-for="item in theSelect" :key="item.id"  v-show=" num == 2">
                <commodity :data="item">
                    <template v-slot>
                        <router-link :to="'/details/' + item.id">
                            <button>立即选购</button>
                        </router-link>
                    </template>
                </commodity>
            </a-col>
        </a-row>
    </div>
</template>

<script>
import Commodity from './Commodity.vue'
import {getGoods} from '../assets/js/request.js'
export default {
    components:{
        Commodity,
    },
    data() {
        return {
            num: 0,
            options:[
                {id: 0, text: "新品" },
                {id: 1, text: "畅销"},
                {id: 2, text: "甄选月相"},
            ],
            // 新品
            newProduct:[],
            // 畅销
            bestSelling:[],
            // 甄选月相
            theSelect:[]
        }
    },
    methods: {
        pitchOn(id) {
            this.num = id;
        }
    },
    created() {
        getGoods(100)
        .then(data => {
            // console.log(data)
            data.rows.forEach((item)=>{
                if(item.classify_id === 160) {
                    this.newProduct.unshift(item)
                } else if(item.classify_id === 164) {
                    this.bestSelling.unshift(item)
                } else if(item.classify_id === 166) {
                    this.theSelect.unshift(item)
                }
            })
        }).then(data => {
            // console.log(this.newProduct, this.bestSelling, this.theSelect)
        })
    },
}
</script>

<style lang='scss' scoped>
    .options {
        margin-bottom: 30px;
        .list {
            font-size: 18px;
            color: rgb(202, 202, 202);
            width: 100%;
            margin: 45px 0 20px;
            display: flex;
            justify-content: center;
            li {
                margin: 0 40px;
            }
        }
        .show {
            color: black;
            border-bottom: 1px solid blue;
        }
        .commodity {
            display: flex;
            justify-content: center;
            width: 100%;
            button {
                font-size: 14px;
                width: 50%;
                height: 44px;
                background: #003150;
                color: white;
                margin: 20px 0 0;
            }
        }
    }
    
</style>